<template>
  <div class="admin-dashboard">
    <el-page-header>
      <template #content>
        <span class="text-large font-600 mr-3">管理员后台</span>
      </template>
      <template #extra>
        <el-button 
          :icon="Refresh" 
          :loading="statisticsLoading"
          @click="fetchStatistics"
          circle
        />
        <el-switch
          v-model="autoRefresh"
          active-text="自动刷新"
          inactive-text="手动刷新"
          style="margin-left: 10px;"
        />
      </template>
    </el-page-header>

    <el-row :gutter="20" style="margin-top: 20px;">
      <!-- 数据统计卡片 -->
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" v-loading="statisticsLoading">
          <el-statistic title="总用户数" :value="statistics.users?.total || 0">
            <template #prefix>
              <el-icon><User /></el-icon>
            </template>
          </el-statistic>
          <div style="margin-top: 8px; font-size: 12px; color: #909399;">
            活跃用户: {{ statistics.users?.active || 0 }}
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover">
          <el-statistic title="总景点数" :value="statistics.attractions?.total || 0">
            <template #prefix>
              <el-icon><Location /></el-icon>
            </template>
          </el-statistic>
          <div style="margin-top: 8px; font-size: 12px; color: #909399;">
            有图片: {{ statistics.attractions?.with_images || 0 }}
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover">
          <el-statistic title="总动态数" :value="statistics.social?.posts || 0">
            <template #prefix>
              <el-icon><ChatDotRound /></el-icon>
            </template>
          </el-statistic>
          <div style="margin-top: 8px; font-size: 12px; color: #909399;">
            近7天: {{ statistics.social?.posts_last_7_days || 0 }}
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover">
          <el-statistic title="总路线数" :value="statistics.routes?.total || 0">
            <template #prefix>
              <el-icon><MapLocation /></el-icon>
            </template>
          </el-statistic>
          <div style="margin-top: 8px; font-size: 12px; color: #909399;">
            分享路线: {{ statistics.routes?.shared || 0 }}
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 功能入口 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :xs="24" :sm="12" :md="8">
        <el-card shadow="hover" class="admin-card" @click="goToAdminAttractions">
          <div class="card-content">
            <el-icon class="card-icon"><Location /></el-icon>
            <h3>景点管理</h3>
            <p>管理景点信息、图片、分类</p>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8">
        <el-card shadow="hover" class="admin-card" @click="goToAdminUsers">
          <div class="card-content">
            <el-icon class="card-icon"><User /></el-icon>
            <h3>用户管理</h3>
            <p>管理用户账号、权限</p>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8">
        <el-card shadow="hover" class="admin-card" @click="goToAdminPosts">
          <div class="card-content">
            <el-icon class="card-icon"><ChatDotRound /></el-icon>
            <h3>内容管理</h3>
            <p>审核动态、评论</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 扩展功能入口 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :xs="24" :sm="12" :md="8">
        <el-card shadow="hover" class="admin-card-secondary" @click="goToAdminSettings">
          <div class="card-content">
            <el-icon class="card-icon"><Setting /></el-icon>
            <h3>系统配置</h3>
            <p>配置系统参数、推荐算法权重</p>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8">
        <el-card shadow="hover" class="admin-card-secondary" @click="handleExportData">
          <div class="card-content">
            <el-icon class="card-icon"><Download /></el-icon>
            <h3>数据导出</h3>
            <p>导出景点、用户、统计数据</p>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8">
        <el-card shadow="hover" class="admin-card-secondary" @click="goToAdminLogs">
          <div class="card-content">
            <el-icon class="card-icon"><Document /></el-icon>
            <h3>操作日志</h3>
            <p>查看管理员操作历史记录</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 系统健康检查 -->
    <el-card style="margin-top: 20px;" v-loading="healthLoading">
      <template #header>
        <div style="display: flex; align-items: center; justify-content: space-between;">
          <div style="display: flex; align-items: center;">
            <el-icon style="margin-right: 8px;"><Monitor /></el-icon>
            <span>系统健康检查</span>
          </div>
          <el-button 
            :icon="Refresh" 
            size="small"
            :loading="healthLoading"
            @click="fetchHealthCheck"
          >
            刷新
          </el-button>
        </div>
      </template>
      <div v-if="healthStatus">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="6">
            <div class="health-item">
              <div class="health-label">系统状态</div>
              <el-tag 
                :type="healthStatus.status === 'healthy' ? 'success' : 'danger'"
                size="large"
              >
                {{ healthStatus.status === 'healthy' ? '正常' : '异常' }}
              </el-tag>
            </div>
          </el-col>
          <el-col :xs="24" :sm="12" :md="6">
            <div class="health-item">
              <div class="health-label">数据库</div>
              <el-tag 
                :type="healthStatus.checks?.database?.status === 'healthy' ? 'success' : 'danger'"
                size="large"
              >
                {{ healthStatus.checks?.database?.status === 'healthy' ? '正常' : '异常' }}
              </el-tag>
            </div>
          </el-col>
          <el-col :xs="24" :sm="12" :md="6">
            <div class="health-item">
              <div class="health-label">缓存</div>
              <el-tag 
                :type="healthStatus.checks?.cache?.status === 'healthy' ? 'success' : healthStatus.checks?.cache?.status === 'degraded' ? 'warning' : 'danger'"
                size="large"
              >
                {{ healthStatus.checks?.cache?.status === 'healthy' ? '正常' : healthStatus.checks?.cache?.status === 'degraded' ? '降级' : '异常' }}
              </el-tag>
            </div>
          </el-col>
          <el-col :xs="24" :sm="12" :md="6">
            <div class="health-item">
              <div class="health-label">24小时错误数</div>
              <el-tag 
                :type="(healthStatus.performance?.errors_last_24h || 0) === 0 ? 'success' : (healthStatus.performance?.errors_last_24h || 0) < 10 ? 'warning' : 'danger'"
                size="large"
              >
                {{ healthStatus.performance?.errors_last_24h || 0 }}
              </el-tag>
            </div>
          </el-col>
        </el-row>
        <el-divider />
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="8">
            <div class="performance-item">
              <div class="performance-label">数据库查询数</div>
              <div class="performance-value">{{ healthStatus.performance?.database_queries || 0 }}</div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8">
            <div class="performance-item">
              <div class="performance-label">平均查询时间</div>
              <div class="performance-value">{{ healthStatus.performance?.database_avg_time || 0 }}ms</div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8">
            <div class="performance-item">
              <div class="performance-label">最后检查时间</div>
              <div class="performance-value">{{ formatTime(healthStatus.timestamp) }}</div>
            </div>
          </el-col>
        </el-row>
        <div v-if="healthStatus.performance?.error_types && Object.keys(healthStatus.performance.error_types).length > 0" style="margin-top: 20px;">
          <el-alert
            title="错误类型统计"
            type="warning"
            :closable="false"
          >
            <div style="margin-top: 10px;">
              <el-tag 
                v-for="(count, type) in healthStatus.performance.error_types" 
                :key="type"
                style="margin-right: 10px; margin-bottom: 5px;"
              >
                {{ type }}: {{ count }}
              </el-tag>
            </div>
          </el-alert>
        </div>
      </div>
      <el-empty v-else description="暂无健康检查数据" />
    </el-card>

    <!-- 数据可视化图表区域 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :xs="24" :sm="12" :md="12">
        <el-card>
          <template #header>
            <div style="display: flex; align-items: center;">
              <el-icon style="margin-right: 8px;"><TrendCharts /></el-icon>
              <span>数据分布</span>
            </div>
          </template>
          <div class="chart-container">
            <div class="chart-item">
              <div class="chart-label">用户</div>
              <div class="chart-bar">
                <div 
                  class="chart-fill" 
                  :style="{ width: getPercentage(statistics.users?.total || 0, getMaxValue(['users', 'attractions', 'routes', 'social'])) + '%', background: 'linear-gradient(90deg, #667eea 0%, #764ba2 100%)' }"
                ></div>
              </div>
              <div class="chart-value">{{ statistics.users?.total || 0 }}</div>
            </div>
            <div class="chart-item">
              <div class="chart-label">景点</div>
              <div class="chart-bar">
                <div 
                  class="chart-fill" 
                  :style="{ width: getPercentage(statistics.attractions?.total || 0, getMaxValue(['users', 'attractions', 'routes', 'social'])) + '%', background: 'linear-gradient(90deg, #f093fb 0%, #f5576c 100%)' }"
                ></div>
              </div>
              <div class="chart-value">{{ statistics.attractions?.total || 0 }}</div>
            </div>
            <div class="chart-item">
              <div class="chart-label">路线</div>
              <div class="chart-bar">
                <div 
                  class="chart-fill" 
                  :style="{ width: getPercentage(statistics.routes?.total || 0, getMaxValue(['users', 'attractions', 'routes', 'social'])) + '%', background: 'linear-gradient(90deg, #4facfe 0%, #00f2fe 100%)' }"
                ></div>
              </div>
              <div class="chart-value">{{ statistics.routes?.total || 0 }}</div>
            </div>
            <div class="chart-item">
              <div class="chart-label">动态</div>
              <div class="chart-bar">
                <div 
                  class="chart-fill" 
                  :style="{ width: getPercentage(statistics.social?.posts || 0, getMaxValue(['users', 'attractions', 'routes', 'social'])) + '%', background: 'linear-gradient(90deg, #fa709a 0%, #fee140 100%)' }"
                ></div>
              </div>
              <div class="chart-value">{{ statistics.social?.posts || 0 }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12">
        <el-card>
          <template #header>
            <div style="display: flex; align-items: center;">
              <el-icon style="margin-right: 8px;"><PieChart /></el-icon>
              <span>活跃度统计</span>
            </div>
          </template>
          <div class="pie-chart-container">
            <div class="pie-item">
              <div class="pie-circle" :style="{ background: `conic-gradient(#67c23a ${getPercentage(statistics.users?.active || 0, statistics.users?.total || 1)}%, #e4e7ed ${getPercentage(statistics.users?.active || 0, statistics.users?.total || 1)}%)` }">
                <div class="pie-inner">
                  <div class="pie-value">{{ getPercentage(statistics.users?.active || 0, statistics.users?.total || 1) }}%</div>
                  <div class="pie-label">活跃用户</div>
                </div>
              </div>
            </div>
            <div class="pie-item">
              <div class="pie-circle" :style="{ background: `conic-gradient(#409eff ${getPercentage(statistics.attractions?.with_images || 0, statistics.attractions?.total || 1)}%, #e4e7ed ${getPercentage(statistics.attractions?.with_images || 0, statistics.attractions?.total || 1)}%)` }">
                <div class="pie-inner">
                  <div class="pie-value">{{ getPercentage(statistics.attractions?.with_images || 0, statistics.attractions?.total || 1) }}%</div>
                  <div class="pie-label">有图片景点</div>
                </div>
              </div>
            </div>
            <div class="pie-item">
              <div class="pie-circle" :style="{ background: `conic-gradient(#e6a23c ${getPercentage(statistics.routes?.shared || 0, statistics.routes?.total || 1)}%, #e4e7ed ${getPercentage(statistics.routes?.shared || 0, statistics.routes?.total || 1)}%)` }">
                <div class="pie-inner">
                  <div class="pie-value">{{ getPercentage(statistics.routes?.shared || 0, statistics.routes?.total || 1) }}%</div>
                  <div class="pie-label">分享路线</div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 热门景点 -->
    <el-card style="margin-top: 20px;" v-if="statistics.popular_attractions && statistics.popular_attractions.length > 0">
      <template #header>
        <div style="display: flex; align-items: center;">
          <el-icon style="margin-right: 8px;"><Location /></el-icon>
          <span>热门景点 Top 5</span>
        </div>
      </template>
      <el-table :data="statistics.popular_attractions" stripe>
        <el-table-column type="index" label="排名" width="80" />
        <el-table-column prop="name" label="景点名称" />
        <el-table-column prop="favorite_count" label="收藏数" width="120" />
        <el-table-column prop="popularity" label="热度" width="120">
          <template #default="scope">
            <el-progress :percentage="scope.row.popularity" :color="getPopularityColor(scope.row.popularity)" />
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted, computed, watch, h } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { ElMessage, ElMessageBox } from 'element-plus'
import { User, Location, ChatDotRound, MapLocation, Setting, Download, Document, Refresh, TrendCharts, PieChart, Monitor } from '@element-plus/icons-vue'
import TravelAPI from '../api/travel'
import { handleApiError } from '../utils/errorHandler'
import logger from '../utils/logger'

export default {
  name: 'AdminDashboard',
  components: {
    User,
    Location,
    ChatDotRound,
    MapLocation,
    Setting,
    Download,
    Document,
    TrendCharts,
    PieChart,
    Monitor
  },
  setup() {
    const router = useRouter()
    const store = useStore()
    
    const statistics = ref({
      users: { total: 0, active: 0 },
      attractions: { total: 0, with_images: 0, reviews: 0, avg_rating: 0, favorites: 0 },
      routes: { total: 0, shared: 0, last_7_days: 0 },
      social: { posts: 0, posts_last_7_days: 0 },
      popular_attractions: []
    })
    const statisticsLoading = ref(false)
    const autoRefresh = ref(false)
    let refreshInterval = null
    const healthStatus = ref(null)
    const healthLoading = ref(false)

    const isAdmin = computed(() => store.getters.isAdmin)

    const fetchStatistics = async () => {
      statisticsLoading.value = true
      try {
        const response = await TravelAPI.getAttractionStatistics()
        statistics.value = response
      } catch (error) {
        handleApiError(error, '获取统计数据失败')
      } finally {
        statisticsLoading.value = false
      }
    }

    const getPercentage = (value, max) => {
      if (!max || max === 0) return 0
      return Math.min(100, Math.round((value / max) * 100))
    }

    const getMaxValue = (keys) => {
      let max = 0
      keys.forEach(key => {
        const value = statistics.value[key]?.total || statistics.value[key] || 0
        if (value > max) max = value
      })
      return max || 1
    }

    const fetchHealthCheck = async () => {
      healthLoading.value = true
      try {
        const response = await TravelAPI.getHealthCheck()
        healthStatus.value = response
      } catch (error) {
        handleApiError(error, '获取健康检查失败')
      } finally {
        healthLoading.value = false
      }
    }

    const formatTime = (timestamp) => {
      if (!timestamp) return '-'
      try {
        const date = new Date(timestamp)
        return date.toLocaleString('zh-CN', { 
          year: 'numeric', 
          month: '2-digit', 
          day: '2-digit', 
          hour: '2-digit', 
          minute: '2-digit',
          second: '2-digit'
        })
      } catch (e) {
        return timestamp
      }
    }

    const goToAdminAttractions = () => {
      router.push('/admin/attractions')
    }

    const goToAdminUsers = () => {
      router.push('/admin/users')
    }

    const goToAdminPosts = () => {
      router.push('/admin/posts')
    }

    const goToAdminSettings = () => {
      router.push('/admin/settings')
    }

    const exportType = ref('attractions')
    const exportFormat = ref('excel')

    const handleExportData = () => {
      // 显示导出选项对话框
      ElMessageBox({
        title: '数据导出',
        message: h('div', { style: 'padding: 20px 0;' }, [
          h('p', { style: 'margin-bottom: 15px; font-weight: 600;' }, '请选择要导出的数据类型：'),
          h('el-radio-group', {
            modelValue: exportType.value,
            'onUpdate:modelValue': (val) => {
              exportType.value = val
            },
            style: 'display: flex; flex-direction: column; gap: 10px;'
          }, [
            h('el-radio', { label: 'attractions' }, '景点数据'),
            h('el-radio', { label: 'users' }, '用户数据'),
            h('el-radio', { label: 'posts' }, '动态数据'),
            h('el-radio', { label: 'routes' }, '路线数据')
          ]),
          h('p', { style: 'margin-top: 20px; margin-bottom: 15px; font-weight: 600;' }, '导出格式：'),
          h('el-radio-group', {
            modelValue: exportFormat.value,
            'onUpdate:modelValue': (val) => {
              exportFormat.value = val
            },
            style: 'display: flex; flex-direction: column; gap: 10px;'
          }, [
            h('el-radio', { label: 'excel' }, 'Excel (.xlsx)'),
            h('el-radio', { label: 'csv' }, 'CSV (.csv)')
          ])
        ]),
        showCancelButton: true,
        confirmButtonText: '导出',
        cancelButtonText: '取消',
        beforeClose: async (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            try {
              // 调用真实的导出API
              const blob = await TravelAPI.exportData(exportType.value, exportFormat.value)
              
              // 创建下载链接
              const url = window.URL.createObjectURL(new Blob([blob]))
              const link = document.createElement('a')
              link.href = url
              
              // 根据类型和格式设置文件名
              const fileExtension = exportFormat.value === 'excel' ? 'xlsx' : 'csv'
              const fileName = `${exportType.value}.${fileExtension}`
              link.setAttribute('download', fileName)
              
              document.body.appendChild(link)
              link.click()
              link.remove()
              window.URL.revokeObjectURL(url)
              
              ElMessage.success('导出成功')
              done()
            } catch (error) {
              logger.error('导出失败:', error)
              let errorMessage = '导出失败'
              if (error.response) {
                const status = error.response.status
                if (status === 401) {
                  errorMessage = '登录已过期，请重新登录'
                } else if (status === 403) {
                  errorMessage = '没有权限导出数据'
                } else if (error.response.data?.error) {
                  errorMessage = error.response.data.error
                }
              } else if (error.message) {
                errorMessage = error.message
              }
              ElMessage.error(errorMessage)
            } finally {
              instance.confirmButtonLoading = false
            }
          } else {
            done()
          }
        }
      })
    }

    const goToAdminLogs = () => {
      router.push('/admin/logs')
    }

    // 监听自动刷新开关变化
    watch(autoRefresh, (newVal) => {
      if (newVal) {
        // 开启自动刷新，每30秒刷新一次
        refreshInterval = setInterval(() => {
          fetchStatistics()
        }, 30000)
      } else {
        // 关闭自动刷新
        if (refreshInterval) {
          clearInterval(refreshInterval)
          refreshInterval = null
        }
      }
    })

    onMounted(() => {
      if (!isAdmin.value) {
        ElMessage.error('您没有管理员权限')
        router.push('/')
        return
      }
      fetchStatistics()
      fetchHealthCheck()
    })

    onUnmounted(() => {
      if (refreshInterval) {
        clearInterval(refreshInterval)
      }
    })

    const getPopularityColor = (popularity) => {
      if (popularity >= 80) return '#67c23a'
      if (popularity >= 60) return '#e6a23c'
      if (popularity >= 40) return '#f56c6c'
      return '#909399'
    }

    return {
      statistics,
      statisticsLoading,
      autoRefresh,
      isAdmin,
      Refresh,
      TrendCharts,
      PieChart,
      goToAdminAttractions,
      goToAdminUsers,
      goToAdminPosts,
      goToAdminSettings,
      handleExportData,
      goToAdminLogs,
      getPopularityColor,
      fetchStatistics,
      getPercentage,
      getMaxValue,
      healthStatus,
      healthLoading,
      fetchHealthCheck,
      formatTime
    }
  }
}
</script>

<style scoped>
.admin-dashboard {
  /* 南昌旅游特色：天空蓝渐变背景 */
  background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 50%, #90CAF9 100%);
  min-height: 100vh;
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.admin-dashboard :deep(.el-card) {
  border-radius: 12px;
  border: none;
  transition: all 0.3s ease;
}

.admin-dashboard :deep(.el-card:hover) {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.admin-dashboard :deep(.el-statistic) {
  text-align: center;
}

.admin-dashboard :deep(.el-statistic__head) {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.admin-dashboard :deep(.el-statistic__number) {
  font-size: 28px;
  font-weight: 600;
  color: #303133;
}

.admin-card {
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* 南昌红到滕王阁金渐变 */
  background: linear-gradient(135deg, #C8102E 0%, #D4AF37 100%);
  border: none;
}

.admin-card:nth-child(2) {
  /* 赣江蓝渐变 */
  background: linear-gradient(135deg, #1E88E5 0%, #42A5F5 100%);
}

.admin-card:nth-child(3) {
  /* 自然绿渐变 */
  background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
}

.admin-card-secondary {
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* 滕王阁金到南昌红渐变 */
  background: linear-gradient(135deg, #D4AF37 0%, #C8102E 100%);
  border: none;
}

.admin-card-secondary:nth-child(2) {
  /* 赣江蓝渐变 */
  background: linear-gradient(135deg, #1E88E5 0%, #42A5F5 100%);
}

.admin-card-secondary:nth-child(3) {
  /* 自然绿渐变 */
  background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
}

.admin-card-secondary:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

.admin-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

.card-content {
  text-align: center;
  padding: 30px 20px;
  color: white;
}

.card-icon {
  font-size: 56px;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 20px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.card-content h3 {
  margin: 15px 0 10px 0;
  color: white;
  font-size: 20px;
  font-weight: 600;
}

.card-content p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  margin: 0;
  line-height: 1.6;
}

.admin-dashboard :deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
}

.admin-dashboard :deep(.el-table th) {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 600;
}

.admin-dashboard :deep(.el-progress-bar__outer) {
  border-radius: 4px;
}

.chart-container {
  padding: 20px 0;
}

.chart-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.chart-item:last-child {
  margin-bottom: 0;
}

.chart-label {
  width: 80px;
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

.chart-bar {
  flex: 1;
  height: 24px;
  background: #f0f2f5;
  border-radius: 12px;
  overflow: hidden;
  margin: 0 15px;
  position: relative;
}

.chart-fill {
  height: 100%;
  border-radius: 12px;
  transition: width 0.6s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.chart-value {
  width: 60px;
  text-align: right;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.pie-chart-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20px 0;
  flex-wrap: wrap;
  gap: 20px;
}

.pie-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pie-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.3s ease;
}

.pie-circle:hover {
  transform: scale(1.05);
}

.pie-inner {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pie-value {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 5px;
}

.pie-label {
  font-size: 12px;
  color: #909399;
  text-align: center;
}

@media (max-width: 768px) {
  .chart-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .chart-label {
    margin-bottom: 8px;
  }

  .chart-bar {
    width: 100%;
    margin: 0 0 8px 0;
  }

  .chart-value {
    width: 100%;
    text-align: left;
  }

  .pie-chart-container {
    flex-direction: column;
  }

  .pie-circle {
    width: 100px;
    height: 100px;
  }

  .pie-inner {
    width: 75px;
    height: 75px;
  }

  .pie-value {
    font-size: 16px;
  }
}

.health-item {
  text-align: center;
  padding: 15px;
}

.health-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 10px;
  font-weight: 500;
}

.performance-item {
  text-align: center;
  padding: 15px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-radius: 8px;
}

.performance-label {
  font-size: 13px;
  color: #909399;
  margin-bottom: 8px;
}

.performance-value {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
}
</style>

